<template>
  <a-modal
    v-model="show"
    :width="900"
    :keyboard="false"
    :closable="false"
    :centered="true"
    @ok="ok"
    @cancel="cancel"
    :maskClosable="false"
    :mask="false"
    okText="确认"
    cancelText="取消">
    <a-tabs v-model="activeKey">
      <a-tab-pane tab="Online表单" key="1">
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon">
          </i> 已选择 <a><b>{{ selectedRowKeys.length }}</b></a>项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="onlineDataSource"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}">
        </a-table>
      </a-tab-pane>
      <a-tab-pane tab="设计表单" key="2">
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon">
          </i> 已选择 <a><b>{{ selectedRowKeys.length }}</b></a>项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>
        <a-table
          ref="table1"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="desFormDataSource"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}">
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script>
  import { getAction } from '@/api/manage'
  
  export default {
    name: 'AppRouteModal',
    props: {
      appRouteVisible: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        activeKey:"1",
        queryDesForm: '/act/process/extActDesignFlowData/getDesFormFlows',
        queryOnlineForm:'/joa/designform/designFormCommuse/queryOnlineFormList',
        onlineDataSource:[],
        desFormDataSource:[],
        selectionRows:[],
        selectedRowKeys:[],
        columns: [
          {
            title: '表名/自定义表单CODE',
            align: 'center',
            dataIndex: 'desformCode'
          },
          {
            title: '表名称',
            align: 'center',
            dataIndex: 'desformName'
          },
          {
            title: '流程名称',
            align: 'center',
            dataIndex: 'procName'
          }
        ],
      }
    },
    computed: {
      show: {
        get: function () {
          return this.appRouteVisible
        },
        set: function () {
        }
      },
    },
    methods: {
      initTableData(){
        this.loadOnlineTab()
        this.loadDesformTab()
      },
      loadOnlineTab() {
        getAction(this.queryOnlineForm).then((res) => {
          if (res.success) {
            this.onlineDataSource= res.result
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      loadDesformTab() {
        getAction(this.queryDesForm).then((res) => {
          if (res.success) {
            this.desFormDataSource=res.result;
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectionRows = selectionRows
      },
      onClearSelected() {
        this.selectedRowKeys = []
        this.selectionRows = []
      },
      ok () {
        if(this.selectionRows.length>0){
          let code = this.selectionRows[0].desformCode;
          let prefix = this.activeKey=='1'?'/app/online/':'/app/desform/'
          this.$emit('choose',`${prefix}${code}`)
        }
        this.cancel()
      },
      cancel () {
        this.$emit('close')
        this.reset()
      },
      reset(){
        this.onClearSelected();
        this.activeKey='1'
      }
    }
  }
</script>
<style>
  
</style>
